import React from 'react';
import { message, Popover, Dropdown } from 'antd';
import styles from './index.module.less';
import { logoutAPI } from '../../api/login';
import { useNavigate } from 'react-router-dom';
import { removeToken } from '../../utils/tools';

const Header: React.FC = () => {
  const navigate = useNavigate();
  const logout = async () => {
    const res: any = await logoutAPI();
    // console.log(res);
    removeToken();
    if (res.success) {
      navigate('/login');
      message.success(res.data);
    }
  };

  const items: any = [
    {
      key: 'email',
      label: '邮箱:18738359192@163.com',
    },
    {
      key: 'logout',
      label: '退出',
    },
  ];

  const onClick = async ({ key }: { key: string }) => {
    const res: any = await logoutAPI();
    if (key === 'logout') {
      // console.log(res);
      removeToken();
      if (res.success) {
        navigate('/login');
        message.success(res.data);
      }
    }
  };
  return (
    <div className={styles.wrap}>
      <div className={styles.left}>
        <h1>天丰管理系统</h1>
        <span>给内部人员用的</span>
      </div>
      <div className={styles.right}>
        <Dropdown menu={{ items, onClick }} trigger={['click']}>
          <div className={styles.nickName}>康康学前端</div>
        </Dropdown>
      </div>
      {/* <Popover
        placement='bottom'
        content={
          <div style={{ cursor: 'pointer' }} onClick={logout}>
            退出登录
          </div>
        }
      >
        <div className={stlyes.logout}></div>
      </Popover> */}
    </div>
  );
};

export default Header;
